<template>
  <div class="forget">
      <div class="text">
          <p>您的密码忘记了？</p>
          <p>您可以重置您的密码</p>
      </div>
  <div class="consumer">
         <input class="mobile" type="tel"  placeholder="请输入手机号" maxlength="11" v-model="form.tel">
         <div class="phoneCode">
             <input class="password" type="text"  placeholder="请输入验证码" v-model="form.code">
             <label  @click="getCode" :disabled="disableds">{{hint}}</label>
         </div>
         <input class="password" type="password"  placeholder="设置6~15位的新密码" maxlength="15" minlength="6" v-model="form.password">
         <el-row><el-button type="primary" @click="submit">提交</el-button></el-row>
         <router-link to="/login" class="userLogin">用户登录</router-link>
  </div>
  </div> 
</template>

<script>
export default {
  data() {
    return {
      form: {
        tel: "",
        code: "",
        password: ""
      },
      disableds: false,
      confirm: "confirm",
      hint: "获取验证码"
    };
  },
  updated() {
    if (this.form.tel && this.form.code && this.form.password) {
      this.confirm = "success";
    } else {
      this.confirm = "confirm";
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      let flag = false;
      if (flag) return false;
      let i = 60;
      let type = {
        type: 1,
        tel: this.form.tel
      };
      let types = {
        type: 2,
        tel: this.form.tel
      };
      if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
        return alert("请输入正确的手机号");
      }
      // 判断手机号是否被注册
      let countDown;
      this.utils.$get(
        this.utils.GET_USERTEL,
        data => {
          // 发送验证码
          //  console.log(GET_USERSMS.data)
          this.utils.$post(
            this.utils.GET_USERSMS,
            data => {
              if (data.code != 0) return alert(data.msg);
              countDown = setInterval(() => {
                this.disableds = true;
                i--;
                this.hint = i + "s";
                if (i <= 0) {
                  this.disableds = false;
                  this.hint = "获取验证码";
                  clearInterval(countDown);
                }
              }, 1000);
            },
            types
          );
        },
        type
      );
    },
    // 提交修改密码
    submit() {
      if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
        return alert("请输入正确的手机号");
      }
      if (!/^[0-9]*$/.test(this.form.code)) {
        return alert("请输入正确的验证码");
      }
      if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
        return alert("请输入正确的密码");
      }
      this.utils.$post(
        this.utils.SET_PASSWORD,
        data => {
          if (data.code != 0) return alert(data.msg);
          alert("修改成功");
          this.$router.push({ path: "/login" });
        },
        this.form
      );
    }
  }
};
</script>


<style lang="less">
.forget {
  width: 420px;
  margin:150px auto;
  border: 1px solid #dddddd;
  border-radius: 4px;
  position: relative;
  .text {
    height: 159px;
    margin:60px auto;
    border-bottom: 1px solid #dddddd;
    > p:nth-child(1) {
      font-size: 36px;
      color: #232323;
      font-weight: 600;
      display: flex;
      justify-content: center;
    }
    > p:nth-child(2) {
      font-size: 18px;
      color: #999999;
      margin-top: 20px;
      margin-bottom: 60px;
      display: flex;
      justify-content: center;
    }
  }
  .consumer {
    > input:focus {
      color: #232323;
    }
    font-size: 14px;
    height: 415px;
    .mobile {
      border-radius: 4px;
      box-shadow: 0 0 2px 1px #bdc4c9;
      border-width: 0;
      border: 0;
      // margin-top: 60px;
      height: 46px;
      font-size: 14px;
      color: #cccccc;
      width: 298px;
      line-height: 298px;
      text-indent: 17px;
       margin-left:60px ;
    }
    .password {
      border-radius: 4px;
      border-width: 0;
      box-shadow: 0 0 2px 1px #bdc4c9;
      border: 0;
      margin-top: 30px;
      height: 46px;
      font-size: 14px;
      color: #cccccc;
      width: 298px;
      line-height: 298px;
      text-indent: 17px;
       margin-left:60px ;
    }
    .phoneCode {
      > label {
        font-size: 14px;
        color: #399bff;
        position: absolute;
        right: 71px;
        top: 370px;
      }
    }
  }
  .el-button--primary {
    width: 298px;
    margin-top: 50px;
     margin-left:60px ;
  }
  .userLogin {
    font-size: 14px;
    color: #999999;
    // margin: 30px auto;
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
 